import React, { useEffect, useState } from 'react';
import service from '../../../api'
import { useNavigate } from 'react-router-dom'
import * as echarts from 'echarts';
import "./Fenlei.scss"
import { Space, Table, Tag, DatePicker, Tabs, Segmented } from 'antd';
import type { ColumnsType, } from 'antd/es/table';
import type { TabsProps } from 'antd';

interface Props {

}
interface DataType {
    img: string;
}

function Fenxi(props: Props) {
    var myChart: any = null;
    var myStudy: any = null;




    let [list, setlist] = useState([]);//双线echarts。
    let [xi, setxi] = useState([]);//数据明细
    let [xue, setxue] = useState([]);//终端访问量趋势echarts。

    const { RangePicker } = DatePicker;//日期


    //实时访问量统计echarts
    const paylist = async () => {
        const res = await service.shuju.shuju_liuliang_tongji();
        console.log(res.data)
        res.data?.map((item: any) => {
            item.key = item.id
        })

        let x = res.data.map((item: any) => {
            return item.x
        })
        let state = res.data.map((item: any) => {
            return item.state
        })


        draw(x, state,);
        //实例化echarts

        setlist(res.data)
    }
    //数据明细
    const mingxi = async () => {
        const res = await service.shuju.shuju_liuliang_mingxi();
        console.log(res.data)
        res.data?.map((item: any) => {
            item.key = item.id
        })

        setxi(res.data)
    }
    //实时学习人数echarts
    const xstudy = async () => {
        const res = await service.shuju.shuju_liuliang_qushi();
        console.log(res.data)
        res.data.map((item: any) => {
            item.key = item.id
        })

        let biao = res.data.map((item: any) => {
            return item.biao
        })
        let xian = res.data.map((item: any) => {
            return item.xian
        })

        xuexi(biao, xian,);
        //实例化echarts

        setxue(res.data)
    }




    useEffect(() => {
        myChart = echarts.init(document.getElementById('charts') || document.body);
        myStudy = echarts.init(document.getElementById('qushi') || document.body);

        paylist();
        mingxi()
        xstudy()


    }, []);

    // 绘图支付
    var draw = (x: any, state: any,) => {
        // 绘制图表
        myChart.setOption({
            backgroundColor: "#fff",

            title: { //图表的标题
                text: '实时访问量统计',
                top: 20,
                left: '30',
                textStyle: {
                    color: 'black',
                    fontSize: 20, // 务必记住设置文字大小只能是数字
                    lineHeight: 30,
                    fontWeight: 'lighter'
                }, // 主标题样式

                subtext: '更新时间：2020/11/21 08：00',
                x: 'center',

                subtextStyle: {
                    color: '#717171',
                    fontSize: 16,
                    lineHeight: 30,
                    fontWeight: 'normal'
                }, // 副标题样式
            },
            grid: {//图标标题之间的距离
                left: '3%',
                right: '5%',
                bottom: '15%',
                top: '30%',
                containLabel: true,
            },

            xAxis: { //x轴设置
                data: x

            },
            yAxis: [{ // 纵轴标尺固定
                type: 'value',
                scale: true,
                max: 1400,
                min: 0,
                splitNumber: 7,
                boundaryGap: [0.2, 0.2]
            }],
            calculable: true,
            series: [ //数据系列
                {
                    name: '昨日',
                    type: 'bar',//'line' , 'bar' , 'pie'
                    data: state,
                    symbolSize: 0, //圆点大小

                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: 'blue', //折线颜色
                        }
                    }

                },
            ]
        });
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '渠道',
            dataIndex: 'qudao',
            key: 'qudao',
        },
        {
            title: '访客数',
            dataIndex: 'ke',
            key: 'ke',
        },
        {
            title: '访问量',
            dataIndex: 'wen',
            key: 'wen',
        },
        {
            title: '平均访问次数',
            key: 'ci',
            dataIndex: 'ci',
        },
        {
            title: '人均停留时长',
            key: 'ting',
            dataIndex: 'ting',
        },
        {
            title: '跳出率',
            key: 'tiao',
            dataIndex: 'tiao',
        },
        {
            title: '确认订单人数',
            key: 'que',
            dataIndex: 'que',
        },
        {
            title: '支付人数',
            key: 'fu',
            dataIndex: 'fu',
        },
        {
            title: '转化率',
            key: 'zhuan',
            dataIndex: 'zhuan',
        },

    ];

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: `今日`,

        },
        {
            key: '2',
            label: `昨日`,

        },
        {
            key: '3',
            label: `最近7天`,

        },
        {
            key: '4',
            label: `最近30天`,

        },
    ];

    // 绘图访问量趋势
    var xuexi = (biao: any, xian: any,) => {
        // 绘制图表
        myStudy.setOption({
            backgroundColor: "#fff",
            xAxis: { //x轴设置
                // data: xAxis
                data: biao,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "black"
                    }
                },
                axisLine: {
                    show: true,//是否显示轴线
                    lineStyle: {
                        color: '#ccc',//刻度线的颜色
                    }
                }
            },
            yAxis: [{ // 纵轴标尺固定
                type: 'value',
                min: 0,
                splitNumber: 3,

                boundaryGap: [0.2, 0.2],
                axisLabel: {//刻度文本颜色
                    show: true,
                    textStyle: {
                        color: "black"
                    }
                },
                splitLine: {//虚线
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                }

            }],
            calculable: true,
            series: [ //数据系列
                {
                    type: 'line',//'line' , 'bar' , 'pie'
                    data: xian,
                    symbolSize: 0, //圆点大小
                    lineStyle: {      // 阴影部分
                        shadowOffsetX: 0, // 折线的X偏移    
                        shadowOffsetY: 5,// 折线的Y偏移  
                        shadowBlur: 9,  // 折线模糊
                        shadowColor: "orange", //折线颜色
                    },


                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: 'orange', //折线颜色
                        }
                    }

                },


            ]
        });
    }

    return (
        <div className='fenlei'>
            <div id="charts"></div>
            <div className="qushi">
                <div className="top">
                    <h3>各终端访问量趋势</h3>
                    <h4>统计日期</h4>
                    <Space direction="vertical" size={12}>
                        <RangePicker />
                    </Space>
                    <Tabs items={items} />
                </div>
                <Segmented options={['全部', '小程序', 'APP', 'PC端',]} />
                <div id="qushi"></div>
            </div>

            <Table columns={columns} dataSource={xi}>
            </Table>



        </div>
    );
}

export default Fenxi;